/***************************************************************************
 *   This is a part of the NextCAD Web APP.                                *
 *   Copyright (C) AMCAX, All rights reserved.                             *
 ***************************************************************************/

import { KEYBOARD_KEY } from '@app-cad/common/Constants';
import { wsApi } from '@app-cad/server';
import { Box, Button, FormControl, FormGroup, TextField } from '@mui/material';
import i18n from 'i18next';
import { useEffect, useState } from 'react';

import {
  BaseCommand,
  CENTEREVENTS,
  CommandDialog,
  type CommandDialogPlacement,
} from '@amcax/base';
import { eventCenterManager } from '@app-base/common/events/EventCenterManager';

// 棱柱
interface PrismCommandProps {
  title: string;
  onClose: () => void;
  placement: CommandDialogPlacement;
}

function PrismCommand({ title, onClose, placement }: PrismCommandProps) {
  const [polygon, setPolygon] = useState<number>(6);
  const [circumradius, setCircumradius] = useState<number>(2);
  const [height, setHeight] = useState<number>(10);

  useEffect(() => {
    eventCenterManager.activeEventCenter
      .setState('prism')
      .on(CENTEREVENTS.KEYUP, onKeyUp)
      .addExit(exit);

    return exit;
  }, []);

  const handleExecute = async () => {
    const params = {
      polygon: polygon,
      circumradius: circumradius,
      height: height,
    };

    await wsApi.createPrimitive('Prism', params);
    onClose();
  };

  const exit = () => {
    eventCenterManager.activeEventCenter
      .off(CENTEREVENTS.KEYUP, onKeyUp)
      .setDefault();
    onClose();
  };

  const onKeyUp = (e) => {
    if (e.event.key === KEYBOARD_KEY.ESC) {
      exit();
    }
  };

  return (
    <CommandDialog
      title={title}
      onClose={onClose}
      placement={placement}
    >
      <Box
        sx={{
          padding: '0 10px',
        }}
      >
        <FormGroup>
          <FormControl variant='filled'>
            <TextField
              id='polygon'
              label='边数'
              type='number'
              size='small'
              defaultValue={polygon}
              onChange={(e) => setPolygon(Number(e.target.value))}
            ></TextField>
          </FormControl>
          <FormControl variant='filled'>
            <TextField
              id='circumradius'
              label='外接圆半径(mm)'
              type='number'
              size='small'
              margin='normal'
              defaultValue={circumradius}
              onChange={(e) => setCircumradius(Number(e.target.value))}
            ></TextField>
          </FormControl>
          <FormControl variant='filled'>
            <TextField
              id='height'
              label='高度(mm)'
              type='number'
              size='small'
              margin='normal'
              defaultValue={height}
              onChange={(e) => setHeight(Number(e.target.value))}
            ></TextField>
          </FormControl>
          <Box
            sx={{
              padding: '5px 0',
              display: 'flex',
              justifyContent: 'flex-end',
            }}
          >
            <Button
              size='small'
              variant='contained'
              onClick={handleExecute}
            >
              执行
            </Button>
          </Box>
        </FormGroup>
      </Box>
    </CommandDialog>
  );
}

export const cmdPrism: BaseCommand = {
  id: 'CmdPrism',
  label: 'command.prism',
  icon: 'commands/feature/prism',
  create: (label: string, onClose: () => void) => (
    <PrismCommand
      title={i18n.t(label)}
      onClose={onClose}
      placement='topLeft'
    />
  ),
};
